<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>确认验证码</title>
    <meta name="Keywords" content=""/>
    <meta name="description" content="" />
    <script src="__ROOT__/static/home/css/userInfo/js/mui.min.js"></script>
    <link href="__ROOT__/static/home/css/userInfo/css/mui.min.css" rel="stylesheet"/>
    <link href="__ROOT__/static/home/css/login.css" rel="stylesheet"/>
    <link rel="stylesheet" href="__ROOT__/static/home/css/userInfo/css/style.css"/>
    <link href="__ROOT__/static/plugins/layer/skin/layer.css" rel="stylesheet" />
    <link href="__ROOT__/static/home/iconfont/style.css" rel="stylesheet" type="text/css" />
    <link href="__ROOT__/static/home/iconfont/iconfont.css" rel="stylesheet" type="text/css" />
    <script src="__ROOT__/static/home/js/jquery-1.11.1.min.js"></script>
    <script src="__ROOT__/static/plugins/layer.mobile-v2.0/layer_mobile/layer.js"></script>
    <script src="__ROOT__/static/plugins/layer.mobile-v2.0/layer_mobile/need/layer.css"></script>
</head>
<body style="background: #efeff4;">
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">确认验证码</h1>
</header>
<div class="mui-content">
    <div style="height: 7px;"></div>
    <div><center style="font-size: 13px;color: black;">验证码已发送到以下手机，请在1分钟内输入</center></div>
    <div style="height: 7px;"></div>
    <div style="color: black;font-size: 13px;" align="center"><?php use \think\Session; echo Session::get('phone'); ?></div>
    <div style="height: 7px;"></div>
    <center><input type="text" id="mycode" placeholder="请输入验证码" oninput="Verification()" style="width: 42%;margin-bottom:0px;height:35px;font-size: 13px;text-align: center;"></center>
    <div style="height: 7px;"></div>
    <div align="center" id="change"><a id='numDiv'>60</a>秒可重发</div>
    <div style="height: 7px;"></div>
    <center><button id='code'  class="mui-btn mui-btn-block mui-btn-primary" disabled="disabled" style="width: 90%;">下一步</button></center>
</div>
<script>
    $(document).ready(function(){
        $("#code").click(function(){
            var info={};
            info.code=$.trim($("#mycode").val());
            $.ajax({
                cache:true,
                type:"POST",
                url:"{:url('home/Login/verificAtionCodePhone')}",
                dataTypes:"text",
                data:info,
                async:false,
                success:function(data){
                    if(data==1){
                        layer.open({
                            type: 2
                            ,content:"<font color='#f0ffff'>验证成功，即将跳转到下一步...</font>"
                            ,time:1
                        });
                        setTimeout("window.location.href='{:url('home/Userinfo/updatePassword')}'",2000);
                    }else{
                        layer.open({
                            content: '验证码错误'
                            ,skin: 'msg'
                            ,time: 2 //2秒后自动关闭
                        });
                    }
                }
            })
        })
    })
    function Verification(){
        var mycode=$.trim($("#mycode").val());
        if(mycode){
            document.getElementById('code').disabled = false;
        }else{
            document.getElementById('code').disabled = true;
        }
    }
</script>
<script type="text/javascript">
    var num=60;
    var interval=setInterval(function(){
        if(num==0){
            $(document).ready(function(){
                $("#change").html("<a style='font-size: 13px;color:#FF0033;' onclick='Sendout()'>重发验证码</a>");
            })
            clearInterval(interval);
        }
        numDiv.innerHTML=num--;
    },1000);
    function Sendout(){
        var info={}
        info.phone ="{:session::get('phone')}";
        $.ajax({
            cache:true,
            type:"POST",
            url:"{:url('home/Message/getcode')}",
            dataTypes:"text",
            data:info,
            async:false,
            success:function(data){

            }
        })
        var num=60;
        $("#change").html("<a id='numDiv'>60</a>秒可重发");
        var interval=setInterval(function(){
            if(num==0){
                $(document).ready(function(){
                    $("#change").html("<a  style='font-size: 13px;color:#FF0033;' onclick='Sendout()'>重发验证码</a>");
                })
                clearInterval(interval);
            }
            numDiv.innerHTML=num--;
        },1000);
    }
</script>
</body>
</html>
